<!--<ul *ngIf="movie">-->
<!--  <li>-->
<!--    <span>id:{{movie.id}}</span>-->
<!--  </li>-->
<!--  <li>-->
<!--    <span>name:{{movie.name}}</span>-->
<!--  </li>-->
<!--</ul>-->
<!--<button (click)="goBack()">go back</button>-->
<style>
  .card{
    background-color:#fff;
    border: 1px solid #d8d8d8;
    cursor: pointer;
  }
  .scoreBox{

  }
  .bg{
    background-color: #f5f5f5;
  }
  .name{
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #37a;
    overflow: hidden;
  }
  .bigName{
    font-size: 25px;
    line-height: 30px;
    color: #666;
    margin-bottom: 5px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  .icon{
    height: 16px;
    width: 16px;
    font-size: 16px;
  }
  .time{
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: #666;
  }
  .mytitle{
    font-size: 25px;
    font-weight: bold;
    margin-bottom: 10px ;
  }
  ::ng-deep .ant-rate {
    color: #37a;
    font-size: 13px;

  }
  .space{
   margin: 15px;
  }

  .bigSpace{
    margin-top: 15px;
  }
  ::ng-deep .ant-layout-sider {
    max-width: 300px;

  }
  .subname{
    font-size: 10px;
    color: #f44336;
  }
  .normal{
    font-size: 10px;
    color: #666;
  }
  ::ng-deep .ant-empty {

     text-align: left;
  }

</style>
<div style="height: 100px" class="bg"></div>

<div class="center bg">
  <div style="width: 80%">
    <!--返回按钮-->
    <button mat-fab color="primary" aria-label="Example icon button with a delete icon" (click)="goBack()">
      <mat-icon>reply</mat-icon>
    </button>
    <!--影片图片概述-->
    <mat-card style="width: 100%;height: 200px" class="bigSpace">
      <div nz-row style="height: 200px" [nzGutter]="16">
        <div nz-col nzSpan="9" style="height: 180px;">
          <img style="height: 93%;width: 100%" src="{{movie.url}}">
        </div>
        <div nz-col nzSpan="15" style="height: 180px;" >
          <div class="bigName">
            {{movie.name}}
          </div>

          <div nz-row>
            <div nz-col nzSpan="12">
              <div class="left" style="margin-bottom: 10px">
                <mat-icon  style="font-size: 25px">playlist_play</mat-icon>
                <nz-rate style="height: 100%;width: 100%;" [(ngModel)]="movie.score" nzDisabled nzAllowHalf></nz-rate>
              </div>
              <div class="subname">
                平均评分
              </div>
              <div class="normal">
                <span *ngIf="movie.score===null ">暂无评分哦</span>
                <span *ngIf="movie.score!==null ">{{movie.score}}颗星</span>
              </div>
            </div>
            <div nz-col nzSpan="12">
              <div class="left" style="margin-bottom: 10px">
                <mat-icon  style="font-size: 25px">playlist_play</mat-icon>
                <nz-rate style="height: 100%;width: 100%;" [(ngModel)]="movie.myScore" (ngModelChange)="scoreMovie(movie.myScore)" nzAllowHalf></nz-rate>
              </div>
              <div class="subname">
                我的评分
              </div>
              <div class="normal">
                <span *ngIf="movie.score===null ">暂无评分哦</span>
                <span *ngIf="movie.score!==null ">{{movie.myScore}}颗星</span>
              </div>
            </div>
          </div>

          <div class="subname">
            影片类别
          </div>
          <div class="normal">
            <span *ngIf="movie.genres===null || movie.genres===''">暂无类别哦</span>
            <span *ngIf="movie.score!==null || movie.genres!==''">{{movie.genres}}</span>
          </div>
        </div>
      </div>
    </mat-card>
    <!--影片详细介绍-->
    <div nz-row style="" [nzGutter]="16" class="space">
      <div nz-col nzSpan="12" >
        <div class="normal">
          <span *ngIf="movie.descri===null || movie.descri===' '"> 暂无影片介绍哦</span>
          <span *ngIf="movie.descri!==null || movie.descri!==''">{{movie.descri}}</span>
        </div>
      </div>
      <div nz-col nzSpan="12">
          <div class="normal">
            <span *ngIf="movie.issue===null || movie.issue==='' || movie.timelong===null || movie.timelong===''">暂无年份和时长哦</span>
            <span *ngIf="movie.issue!==null || movie.issue!=='' || movie.timelong!==null || movie.timelong!==''">{{movie.issue}}|{{ movie.timelong}}</span>
          </div>
          <div class="subname">
            影片语言
          </div>
        <div class="normal">
          <span *ngIf="movie.language===null || movie.language===''">暂无影片语言哦</span>
          <span *ngIf="movie.language!==null || movie.language!==''">  {{movie.language}}</span>
        </div>
        <div class="subname">
          影片导演
        </div>
        <div class="normal">
          <span *ngIf="movie.director===null || movie.director===''">暂无影片导演哦</span>
          <span *ngIf="movie.director!==null || movie.director!==''">{{movie.director}}</span>
        </div>
        <div class="subname">
          影片演员
        </div>
        <div class="normal">
          <span *ngIf="movie.actors===null || movie.actors===''">暂无影片演员哦</span>
          <span *ngIf="movie.actors!==null || movie.actors!==''">{{movie.actors}}</span>
        </div>
        <div class="subname">
          影片上映日期
        </div>
        <div class="normal">
          <span *ngIf="movie.shoot===null || movie.shoot===''">暂无上映日期哦</span>
          <span *ngIf="movie.shoot!==null || movie.shoot!==''">{{movie.shoot}}</span>
        </div>
      </div>
    </div>
    <!--我的标签-->
    <div class="mytitle left">
      <mat-icon style="margin-right: 5px">send</mat-icon>
      我的标签
    </div>
    <div>
      <form class="example-form">
        <mat-form-field class="example-full-width">
          <mat-label>添加标签</mat-label>
          <span matPrefix>+1 &nbsp;</span>
          <input type="text" matInput [(ngModel)]="myTag" name="myTag">
          <button mat-icon-button  matSuffix mat-icon-button (click)="addTag()">
            <mat-icon matSuffix >mode_edit</mat-icon>
          </button>

        </mat-form-field>
      </form>
      <div *ngIf="userTags === null">
<!--        <span>暂无标签哦，快来为你喜欢的电影添加标签吧!</span>-->
        <nz-empty></nz-empty>
      </div>
      <mat-grid-list cols="10" *ngIf="userTags !== null">
        <mat-grid-tile [colspan]="1" [rowspan]="1" *ngFor="let t of userTags">
          <button mat-mini-fab color="accent" aria-label="Example icon button with a plus one icon">
            {{t}}
          </button>
        </mat-grid-tile>
      </mat-grid-list>
    </div>
    <!--大家的标签-->
    <div class="mytitle left bigSpace">
      <mat-icon style="margin-right: 5px">volume_up</mat-icon>
      大家的标签
    </div>
    <div>
      <div *ngIf="allTags === null">
<!--        <span>暂无标签哦</span>-->
        <nz-empty></nz-empty>
      </div>
      <mat-grid-list cols="10" *ngIf="allTags !== null">
          <mat-grid-tile [colspan]="1" [rowspan]="1" *ngFor="let t of allTags">
            <button mat-mini-fab color="accent" aria-label="Example icon button with a plus one icon">
              {{t}}
            </button>
          </mat-grid-tile>
      </mat-grid-list>
    </div>
    <!--相似推荐-->
    <div class="mytitle left bigSpace">
      <mat-icon style="margin-right: 5px">subtitles</mat-icon>
      相似推荐
    </div>
    <div *ngIf="movie===null ">
      <nz-empty></nz-empty>
    </div>
    <div *ngIf="movie!==null ">
      <div nz-row>
        <div nz-col nzSpan="2" class="center">
          <button mat-fab color="warn" (click)="pagePre()"><mat-icon>arrow_back_ios</mat-icon></button>
        </div>
        <div nz-col nzSpan="20">
          <mat-grid-list  cols="6"  rowHeight="2:3" gutterSize="25px" >
            <mat-grid-tile
              *ngFor="let m of showMovies"
              [colspan]="1"
              [rowspan]="1"
              [routerLink]="'/home/detail/'+m.mid"
             (click)="getToSimilar(m)">
              <div style="width: 100%;height: 100%">
                <div class="card" style="width: 98%;height: 83%">
                  <div  style="height: 25%">
                    <mat-grid-list cols="6" >
                      <mat-grid-tile [colspan]="5" [rowspan]="1" class="name center">
                        <span>{{m.name}}</span>
                      </mat-grid-tile>
                      <mat-grid-tile [colspan]="1" [rowspan]="1" >
                        <mat-icon class="icon center">movie</mat-icon>
                      </mat-grid-tile>
                      <mat-grid-tile [colspan]="6" [rowspan]="1" class="time left">
                        <span>{{m.issue}} | {{m.timelong}}</span>
                      </mat-grid-tile>
                    </mat-grid-list>
                  </div>
                  <div style="height: 75%">
                    <img  style="height: 100%;width: 100%" src="{{m.url}}">
                  </div>
                </div>
                <div class="scoreBox" style="width: 98%;height: 25px">
                  <mat-grid-list cols="6">
                    <mat-grid-tile [colspan]="1" [rowspan]="1" >
                      <mat-icon  style="font-size: 25px">playlist_play</mat-icon>
                    </mat-grid-tile>
                    <mat-grid-tile [colspan]="5" [rowspan]="1">
                      <nz-rate style="height: 100%;width: 100%;" [ngModel]="m.score" nzAllowHalf nzDisabled></nz-rate>
                    </mat-grid-tile>
                  </mat-grid-list>
                </div>
              </div>
            </mat-grid-tile>
          </mat-grid-list>
        </div>
        <div nz-col nzSpan="2" class="center">
          <button mat-fab color="warn" (click)="pageDre()"><mat-icon>arrow_forward_ios</mat-icon></button>
        </div>
      </div>
    </div>


  </div>
</div>
<div style="height: 100px" class="bg"></div>
